<template>
	<view class="grid-content justify-between">
		<view class="grid-item" v-for="(item,index) in lists" :key="index" @click="nav(item.url)">
			<i :class="['myicon',item.icon]"></i>
			<span class="text">{{item.title}}</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
		  lists:{
			  type:Array,
			  default:[]
		  },
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.grid-content{
	.grid-item {
		.myicon{
			font-size: 30px;
			color: $base-color;
		}
		display: flex;
		flex-direction: column;
		flex: 1;
		align-items: center;
		text-align: center;
		.text{
			margin-top: 3px;
			font-size: 18px;
		}
	}
}
</style>
